<template>
  <div>
    <!--面包屑 -->
    <div class="crumbs">
      <el-breadcrumb separator="/" style="font-size: 17px">
        <el-breadcrumb-item
          ><i class="el-icon-s-data"></i> tab选项卡</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="content">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane :label="`未读消息(${no_read.length})`" name="first">
            <el-table :data="no_read" :show-header="false">
              <el-table-column  >
                <template v-slot:default="scope">
                    <span class="color" style="color:#67C23A">{{scope.row.content}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date"> </el-table-column>
              <el-table-column>
                <!--  作用域插槽  v-slot：default=“....” -->
                <template v-slot:default="scope">
                  <el-button type="success" @click="handleRead(scope.$index)"
                    >标签已读</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
              <div class="foot">
                <el-button type="success" @click="handleAllRead"
                    >全部设为已读</el-button
                  >
              </div>
          </el-tab-pane>

          <el-tab-pane :label="`已读消息(${read.length})`" name="second">
            <el-table :data="read" :show-header="false">
              <el-table-column >
                     <template v-slot:default="scope">
                    <span class="color" style="color:#F56C6C">{{scope.row.content}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date"></el-table-column>
              <el-table-column>
                  <template  v-slot:default="scope">
                         <el-button @click="remove(scope.$index)" type="danger">删除</el-button>

                  </template>
              </el-table-column>
            </el-table>
              <div class="foot">
                         <el-button @click="removeAll" type="danger">全部删除</el-button>
              </div>
          </el-tab-pane>
              <!-- 当字符串和 数据连用的时候，用模板字符串吧 -->
          <el-tab-pane :label="`回收站(${collection.length})`" name="third">
              <el-table :show-header="false" :data="collection">
                  <el-table-column >
                       <template v-slot:default="scope">
                    <span class="color" style="color:#909399">{{scope.row.content}}</span>
                </template>
                  </el-table-column>
                <el-table-column prop="date"></el-table-column>
                <el-table-column >
                      <template v-slot:default="scope">
                            <el-button @click="reduction(scope.$index)" type="info"> 还原</el-button>
                      </template>
                </el-table-column>
                  
              </el-table>
            <div class="foot">
                  <el-button @click="clearCollection" type="info"> 清空回收站</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="其余内容" name="fourth"
            >定时任务补偿</el-tab-pane
          >
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      no_read: [
        {
          content: "我是未读消息11111111",
          date: "2021/2/21",
        },
        {
          content: "我是未读消息2222",
          date: "2021/2/22",
        },
        {
          content: "我是未读消息33333",
          date: "2021/2/23",
        },
        {
          content: "我是未读消息11111111",
          date: "2021/2/21",
        },
      ],
      read: [
        {
          content: "我是已读消息11111111",
          date: "2021/2/21",
        },
        {
          content: "我是已读消息2222",
          date: "2021/2/22",
        },
      ],
      collection: [
        {
          content: "121233123",
          date: "2021/2/21",
        },
      ],
    };
  },
  methods: {
    handleRead(index) {
      const item = this.no_read.splice(index, 1);
      this.read = item.concat(this.read);
    },
    remove(index){
        this.$confirm('你确定要删除吗？','警告',{
            type:'warning'
        }).then(()=>{
        const item =this.read.splice(index,1)
        this.collection =item.concat(this.collection)
        },()=>{})
    },
    reduction(index){
        const item =this.collection.splice(index,1)
        this.read= item.concat(this.read)
    },
    handleAllRead(){

        this.read=this.read.concat(this.no_read)
        this.no_read=[]
    },
    removeAll(){
      this.$confirm('你确定要全部删除吗？','警告',{
          type: 'warning'
      }).then(()=>{
      this.collection=this.collection.concat(this.read)
        this.read=[] 
      },()=>{})
       
    },
    clearCollection(){
        this.collection=[]
    }
  },
};
</script>

<style scoped>
.foot{
    margin: 30px 0 0 10px;
}
.color{
  
  font-weight: 700;
}

i {
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
.crumbs {
  margin: 10px 0;
}
</style>